import React, { Component } from 'react';
import ReactDom from 'react-dom';
import util from "@/common/util";
import turnplate from "@/common/turnplate";
import layer from "@/common/layer";
import Rate from '@/Components/rate';
import DDView from '@/Components/ddview';
import InlinePicker from '@/Components/inlinepicker';
import ReactSwiper from 'reactjs-swiper';
import axios from 'axios';
import { relative } from 'path';
import jquery from 'jquery';

class Rxprodetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            prodetail: [],
            payment: ['等额本金', '等额本息', '先息后本', '一次性还本付息'],
            requirement: [],
            material: [],
            tellphone: '',
            city: '',
            second: 0,
            code: ''
        }
        this.valids = [
            {
                key: 'tellphone',
                func(str) {
                    if (str.length !== 11) {
                        jquery(".errormsg").html("手机号码格式错误")
                        return false
                    } else {
                        jquery(".errormsg").empty()
                    }
                    return true
                }
            },
            {
                key: 'code',
                func(str) {
                    if (str.length === 0) {
                        jquery(".errormsg").html("验证码不能为空")
                        return false
                    } else {
                        jquery(".errormsg").empty()
                    }
                    return true
                }
            },
            {
                key: 'city',
                func(str) {
                    if (str.length === 0) {
                        jquery(".errormsg").html("所在城市不能为空")
                        return false
                    }
                    return true
                }
            }
        ]
    }

    async beforeSendCode() {
        if (this.state.second !== 0) { return }
        if (this.state.tellphone.length < 11) {
            jquery(".errormsg").html("手机格式错误")
            return
        } else {
            jquery(".errormsg").empty()
        }

        this.setState({
            second: 60
        });

        let time = setInterval(() => {
            if (this.state.second < 1) {
                clearInterval(time)
            } else {
                this.setState({
                    second: this.state.second - 1
                })
            }
        }, 1000)

        let phone = this.state.tellphone
        let res = await axios.get(`${util.host}/auth/code/sms`, {
            params: {
                deviceId: phone,
                phone: phone
            }
        })

        if (res.data.success) {
            jquery(".errormsg").html("验证码发送成功")
        } else {
            jquery(".errormsg").html("手机号码格式错误")
        }
    }

    async beforeSubmit() {
        for (let item of this.valids) {
            if (!item.func(this.state[item.key])) {
                return;
            }
        }
        // productType: 0 zed   productType: 1 其他产品  productType: 2：荣勋产品
        let sendobj = {
            phone: this.state.tellphone,
            code: this.state.code,
            cityName: this.state.city,
            productType: 2
        }

        let res = await util.rjax({ url: '/zyd/applyZyd', type: "POST", data: sendobj }).catch((res) => {
            if (res.data.msg === "请勿重复申请") {
                layer.open({
                    content: res.data.msg,
                    btn: '好的'
                })
                this.setState({
                    second: 0,
                })
                jquery('.applydialog').hide()
            } else {
                layer.open({
                    content: res.data.msg,
                    btn: '好的'
                })
                this.setState({
                    second: 0,
                })
            }
        })

        if (res) {
            jquery('.applydialog').hide()
            jquery('.submitdialog').show()
        }
    }

    async submitSuccess() {
        jquery('.submitdialog').hide()
    }

    async clickapply() {
        jquery('.apply').show()
        this.setState({
            code: ''
        })
        this.setState({
            tellphone: ''
        })
        this.setState({
            city: ''
        })
        this.setState({
            second: 0,
        })
    }

    async closedialog() {
        jquery('.apply').hide()
    }

    phoneChange(e) {
        this.setState({
            tellphone: e.target.value
        })
    }

    codeChange(e) {
        this.setState({
            code: e.target.value
        })
    }

    cityChange(e) {
        this.setState({
            city: e.target.value
        })
    }

    async getdetail() {
        var id = util.getQuery().id;
        let res = await util.rjax({
            url: '/rxProduct/' + id,
            type: 'get'
        })
        this.setState({
            prodetail: res.data
        })
        this.setState({
            requirement: res.data.applyRequire.split(/\n/g)
        })
        this.setState({
            material: res.data.requirement.split(/\n/g)
        })
    }

    componentDidMount() {
        this.getdetail()
    }

    render() {

        return (
            <div>
                <div id="productdetail">
                    <div className="detailhead">
                        <img className="headimg" src="/assets/wechat/top_pic.png" alt="" />
                        <div className="logobox"></div>
                    </div>

                    {/* prodetail */}
                    <div className="prodetail">
                        <img className="prologo" src="/assets/wechat/logo_spider.jpg" alt="" />
                        <h4 className="protit">{this.state.prodetail.name}</h4>
                        <div className="baseDetail">
                            <p className="dettitle one"><i></i>借款额度：</p>
                            <p className="detvalue">{this.state.prodetail.loanDetail}</p>

                            <p className="dettitle two"><i></i>房屋类型：</p>
                            <p className="detvalue">{this.state.prodetail.houseType}</p>

                            <p className="dettitle three"><i></i>房龄/面积/区域：</p>
                            <p className="detvalue">{this.state.prodetail.houseDetail}</p>

                            <p className="dettitle four"><i></i>年龄：</p>
                            <p className="detvalue">{this.state.prodetail.age}</p>

                            <p className="dettitle five"><i></i>利率（%）：</p>
                            <p className="detvalue">{this.state.prodetail.rate}</p>
                        </div>
                        <div className="applyQua">
                            <h4>申请资格</h4><span className="v"></span>
                            <ul>
                                {this.state.requirement.map((item, index) =>
                                    <li key={index}>{item}</li>
                                )}
                            </ul>
                        </div>
                        <div className="requestMat">
                            <h4>其他条件</h4><span className="v"></span>
                            <ul>
                                {this.state.material.map((item, index) =>
                                    <li key={index}>{item}</li>
                                )}
                            </ul>
                        </div>
                    </div>
                    <div className="btnbox">
                        <button className="applybtn" onClick={this.clickapply.bind(this)}>立即申请</button>
                    </div>
                    {/* applydialog */}
                    <div className="apply">
                        <div className="applydialog">
                            <img className="closeimg" src="/assets/wechat/close1.png" onClick={this.closedialog.bind(this)} alt="" />
                            <span className="phonehead">+86</span>
                            <input type="text" className="text" autoComplete="off" placeholder="请输入手机号" value={this.state.tellphone} onChange={this.phoneChange.bind(this)} maxLength="11" />

                            <div style={{ position: "relative" }}>
                                <span className="codehead">验证码</span>
                                <input type="text" className="text" autoComplete="off" placeholder="请输入验证码" value={this.state.code} onChange={this.codeChange.bind(this)} />
                                <input type="button" className="yzbtn" value={(this.state.second === 0) ? '验证码' : `剩余${this.state.second}秒`} onClick={this.beforeSendCode.bind(this)} />
                            </div>

                            <span className="cityhead">所在城市</span>
                            <input type="text" className="text" autoComplete="off" placeholder="江苏省南京市" value={this.state.city} onChange={this.cityChange.bind(this)} />

                            <span className="errormsg"></span>
                            <input type="button" className="btn" value="确定" onClick={this.beforeSubmit.bind(this)} />
                        </div>
                    </div>

                    {/* submitdialog */}
                    <div className="submitdialog">
                        <span className="mt30">提交成功!</span>
                        <span className="mt10">客服会尽快与您取得联系！</span>
                        <button onClick={this.submitSuccess.bind(this)}>确定</button>
                    </div>


                </div>
            </div >
        )
    }
}
ReactDom.render(<Rxprodetail />, document.getElementById("app"));